<template>
  <div>
    <el-card class="box-card">
      <!-- 搜索框区域，可进行模糊搜索，该区域也包含了 添加按钮 -->
      <div slot="header" class="clearfix">
        <el-form :inline="true" :model="sysUser" class="demo-form-inline">
          <el-form-item label="用户名" prop="userName" style="margin: 15px 40px 25px 30px">
            <el-input v-model="sysUser.userName" placeholder="请输入用户名"></el-input>
          </el-form-item>
          <el-form-item label="手机号" prop="userPhone" style="margin: 15px 40px 25px 30px">
            <el-input v-model="sysUser.userPhone" placeholder="请输入手机号"></el-input>
          </el-form-item>
          <el-form-item style="margin: 15px 40px 25px 30px">
            <el-button type="primary" @click="search" icon="el-icon-search">搜索</el-button>
            <el-button type="info" @click="resetForm()" icon="el-icon-refresh">重置</el-button>
            <el-button type="danger" @click="delBatch" icon="el-icon-delete">批量删除</el-button>
            <el-button type="success" @click="addUser" icon="el-icon-plus">添加</el-button>
            <!-- 添加用户对话框 -->
            <el-dialog title="添加用户" :visible.sync="dialogFormVisible" width="50%" custom-class="custom-dialog">
              <el-form
                :model="newUser"
                :rules="rules"
                ref="addUserForm"
                label-width="100px"
                inline-message
                :inline="true"
                class="custom-form"
              >
                <el-form-item label="用户名">
                  <el-input v-model="newUser.userName" placeholder="请输入用户名" autocomplete="off">
                    <i slot="prefix" class="el-input__icon el-icon-user"></i>
                  </el-input>
                </el-form-item>
                <el-form-item label="手机号">
                  <el-input v-model="newUser.userPhone" placeholder="请输入手机号" autocomplete="off">
                    <i slot="prefix" class="el-input__icon el-icon-phone"></i>
                  </el-input>
                </el-form-item>
                <el-form-item label="密码">
                  <el-input v-model="newUser.userPassword" type="password" placeholder="请输入密码" autocomplete="off">
                    <i slot="prefix" class="el-input__icon el-icon-lock"></i>
                  </el-input>
                </el-form-item>
                <el-form-item label="账号状态">
                  <el-select v-model="newUser.userState" placeholder="请选择账号状态">
                    <i slot="prefix" class="el-input__icon el-icon-setting"></i>
                    <el-option label="启用" value="1"></el-option>
                    <el-option label="停用" value="0"></el-option>
                  </el-select>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取消</el-button>
                <el-button type="primary" @click="submitAddUser">提交</el-button>
              </div>
            </el-dialog>
          </el-form-item>
        </el-form>
      </div>
      <div>
        <el-table :data="userList" stripe style="width: 100%"
          @selection-change="handleSelectionChange">
          <!-- 多选框 -->
          <el-table-column type="selection" width="60" align="center"></el-table-column>
          <!-- 序号 -->
          <el-table-column type="index" label="序号" width="70" align="center">
            <!-- 使用插槽 v-slot 定义列的内容 -->
            <template v-slot="scope">
              <!-- scope.$index 获取当前行索引，然后根据当前页码和每页显示条数计算 序号 -->
              {{ scope.$index + (pageNum - 1) * pageSize + 1 }}
            </template>
          </el-table-column>
          <!-- 用户名 -->
          <el-table-column prop="userName" label="用户名" width="130" align="center"></el-table-column>
          <!-- 手机号 -->
          <el-table-column prop="userPhone" label="手机号" width="185" align="center"></el-table-column>
          <!-- 用户权限 -->
          <el-table-column prop="userPermission" label="用户权限" width="110" align="center">
            <template v-slot="scope">
              <!-- 调用 getUserPermissionTagType 方法获取当前行的用户权限 作为标签类型 -->
              <el-tag :type="getUserPermissionTagType(scope.row.userPermission)" disable-transitions>
                <!-- 通过 getUserPermissionTagName 方法获取当前行的用户权限 作为标签名称 -->
                {{getUserPermissionTagName(scope.row.userPermission)}}
              </el-tag>
            </template>
          </el-table-column>
          <!-- 创建时间 -->
          <el-table-column prop="createTime" label="创建时间" width="250" align="center"></el-table-column>
          <!-- 账号状态 -->
          <el-table-column prop="userState" label="账号状态" width="110" align="center">
            <template v-slot="scope">
              <!-- 调用 getUserStateTagType 方法获取当前行的账号状态 作为标签类型 -->
              <el-tag :type="getUserStateTagType(scope.row.userState)" disable-transitions>
                <!-- 通过 getUserStateTagName 方法获取当前行的账号状态 作为标签名称 -->
                {{getUserStateTagName(scope.row.userState)}}
              </el-tag>
            </template>
          </el-table-column>
          <!-- 操作 -->
          <el-table-column label="操作" width="360" align="center">
            <template v-slot="scope">
              <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
              <el-button
                size="mini"
                type="info"
                @click="handleResetPassword(scope.$index, scope.row)">重置密码</el-button>
              <!-- 根据账号状态显示 停用/启用 按钮，账号状态 为 0 停用则显示启用按钮、为 1 启用则显示停用按钮 -->
              <el-button
                size="mini"
                type="warning"
                v-if="scope.row.userState === 0"
                @click="handleEnable(scope.$index, scope.row)">启用</el-button>
              <el-button
                size="mini"
                type="success"
                v-if="scope.row.userState === 1"
                @click="handleDisable(scope.$index, scope.row)">停用</el-button>
              <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[3,5,7,9]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import { addUser, findAllUser } from '@/api/user'

export default {
  name: 'accountManagement',
  data() {
    return {
      sysUser : {
        userName: '', // 用户名
        userPhone: '', // 手机号
        createTime: '', // 创建时间
      },
      total: 0, // 总条数
      pageNum: 1, // 当前页
      pageSize: 5, // 每页显示条数
      userList: [], // 用户信息列表
      ids: [], // 多选框选中的 用户 id 数组
      userStates: [], // 多选框选中的 账号状态数组
      dialogFormVisible: false, // 控制添加对话框的显示与隐藏
      newUser: { // 添加用户
        userName: '', // 用户名
        userPassword: '', // 密码
        userPhone: '', // 手机号
        userState: '1' // 账号状态，默认为 1 启用
      },
      rules: {
        userName: [{ required: true, message: '请输入用户名', trigger: 'blur'}],
        userPassword: [{ required: true, message: '请输入密码', trigger: 'blur'}],
        userPhone: [{ required: true, message: '请输入手机号', trigger: 'blur'}]
      },
    }
  },
  methods: {
    // 搜索按钮
    search() {
      this.findAllUser()
    },
    // 查询所有用户，模糊查询
    findAllUser() {
      findAllUser({
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        userName: this.sysUser.userName,
        userPhone: this.sysUser.userPhone,
        createTime: this.sysUser.createTime
      }).then(res => {
        if (res.code === 20000) {
          this.userList = res.data.list
          this.total = res.data.total
        }
      })
    },
    // 重置按钮
    resetForm(){
      this.sysUser.userName = '',
        this.sysUser.userPhone = ''
    },
    //
    delBatch() {
      console.log("测试")
    },
    //
    addUser() {
      // 显示 添加用户表单
      this.dialogFormVisible = true
    },
    // 提交 添加用户表单
    submitAddUser() {
      this.$refs.addUserForm.validate(valid => {
        if (valid) {
          addUser(this.newUser).then(res => {
            if (res.code === 20000) {
              this.$message.success("添加用户成功")
              // 关闭 添加用户表单
              this.dialogFormVisible = false
              // 重建加载 用户列表
              this.findAllUser()
            } else {
              this.$message.error("添加用户失败")
            }
          }).catch(() => {
            this.$message.error("请求失败")
          })
        } else {
          this.$message.error("请填写完整信息")
          return false
        }
      })

    },

    // 多选框改变，获取选中的 id 和 账号状态，用于批量删除
    handleSelectionChange(val) {
      const ids = []
      const userStates = []
      // 遍历 val，获取选中的 id 和 账号状态
      for (let i = 0; i < val.length; i++) {
        ids.push(val[i].userId)
        userStates.push(val[i].userState)
      }
      // 将选中的 id 和 账号状态 赋值给对应的属性，以便后续使用
      this.ids = ids
      this.userStates = userStates
    },

    // 判断用户权限, 返回对应的标签类型 用于 显示用户权限标签（0 为超级管理员，1 为管理员）
    getUserPermissionTagType(permission) {
      // 设置用户权限标签类型，“0 超级管理员”使用 primary 蓝色，“1 管理员”使用 success 绿色
      const typeMap = {
        '0': 'primary',
        '1': 'success'
      }
      // 如果权限不在预期范围内，则返回空字符串
      return typeMap[permission] || ''
    },

    // 判断用户权限, 返回对应的标签名称 用于 显示用户权限标签
    getUserPermissionTagName(permission) {
      // 设置用户权限标签名称，“0 超级管理员”显示为 超级管理员，“1 管理员”显示为 管理员
      const nameMap = {
        '0': '超级管理员',
        '1': '管理员'
      }
      // 如果权限不在预期范围内，则返回空字符串
      return nameMap[permission] || ''
    },

    // 判断账号状态, 返回对应的标签类型 用于 显示账号状态标签
    getUserStateTagType(status) {
      // 设置账号状态标签类型，“0 停用”使用 warning 红色，“1 启用”使用 success 绿色
      const typeMap = {
        '0': 'warning',
        '1': 'success'
      }
      // 如果状态不在预期范围内，则返回空字符串
      return typeMap[status] || ''
    },

    // 判断账号状态, 返回对应的标签名称 用于 显示账号状态标签
    getUserStateTagName(status) {
      // 设置账号状态标签名称，“0 停用”显示为 停用，“1 启用”显示为 启用
      const nameMap = {
        '0': '停用',
        '1': '启用'
      }
      // 如果状态不在预期范围内，则返回空字符串
      return nameMap[status] || ''
    },

    // 改变当前页，当前页发生改变时触发
    handleCurrentChange(val) {
      this.pageNum = val
      this.findAllUser()
    },

    // 改变每页展示行数
    handleSizeChange(val) {
      this.pageSize = val
      this.findAllUser()
    },

    // 编辑 用户信息
    handleEdit() {
      // TODO
    },

    // 重置密码
    handleResetPassword() {
      // TODO
    },

    // 启用 用户
    handleEnable(row) {
      // TODO
    },

    // 停用 用户
    handleDisable(row) {
      // TODO
    },

    // 删除 用户
    handleDelete(row) {
      // TODO
    }
  },
  created() {
    this.findAllUser()
  }
}
</script>

<style scoped>
.box-card {
  width: auto;
}

.el-form-item .el-button {
  margin-right: 20px;
}

.el-input {
  width: 220px;
}

/* 表单项间距 */
.el-form-item {
  margin-bottom: 20px;
}

/* 按钮样式 */
.dialog-footer .el-button {
  padding: 10px 20px;
  font-size: 14px;
}

</style>
